<script setup>
import { ref, provide } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

const markList = ref([])

// 延时3秒后赋值
setTimeout(() => {
  markList.value = [{
    id: '5E258EA4-C300-42E5-8FD3-C0862CB620D1',
    name: '磁器口',
    value: 80,
  },
  {
    id: '29A6FC6A-00DF-41DB-BA9C-72DDF8D6C8C2',
    name: '北海银滩',
    value: 120,
  },
  {
    id: '5E258EA4-C300-42E5-8FD3-C0862CB620D3',
    name: '旅顺博物馆',
    value: 5,
  }]
}, 3000)

const selectVal = ref('')
provide('filterValue', selectVal)
</script>

<template>
  <div>
    <select @change="filterChange" v-model="selectVal">
      <option value="">全选</option>
      <option v-for="mark in markList" :value="mark.id">{{mark.name}}</option>
    </select>
  </div>
  <HelloWorld v-bind:markList="markList" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
